<!-- 这是领取票券页面 -->
<template>
  <div class="c-bg-sgray c-pt30">
    <header class="c-ww610 c-mlr-auto c-hh30 c-br15 c-bg-mgray c-ph8 c-pv8">
      <div class="c-w100 c-h c-bg-ccc c-br15"></div>
    </header>
    <article class="c-ww592 c-mlr-auto c-mt-18  c-bg-white c-br20 c-p">
      <span v-if="ticketInfo.enrollId" class="iconfont c-fs120 c-pa c-p-t0 c-p-r0 c-fc-45B930">&#xe939;</span>

      <section class="c-pt40 c-pb24 c-bd-bd1-E1 c-textAlign-c c-fs28 c-fw-b"> {{ticketInfo.enrollId ? '您已成功领取一张活动券':'您有一张活动券可领取'}}</section>
      <section class="c-ph36 c-pb40 c-bd-bd1-E1 activity-body">
        <div class="c-w100 c-hh260 c-mt24 c-m-0auto">
          <img :src="$addXossFilter(activityInfo.poster, require('@/assets/activity_defult.png'))" alt="" class="c-w100 c-h c-br8">
        </div>
        <div class="c-mt24 c-fs26 c-fw-b">{{activityInfo.name}}</div>
        <div class="c-mt20 c-fs24 c-fc-sblack">活动时间：{{enrollStartAt}} 至 {{enrollEndAt}}</div>
        <div v-if="activityInfo.place" class="c-mt20 c-fs24 c-fc-sblack">活动地点：{{activityInfo.place}}</div>
      </section>

      <section class="c-pb32 c-ph36 c-fs26 c-fw-b">
        <!-- 有可领取的票 && 未领取 && 非购买者 -->
        <div class="c-w100 c-hh64 theme-bg c-flex-row c-flex-center c-fc-white c-br32 c-mt32" @click="clickCollect" v-if="ticketInfo.isRest == 1 && ticketInfo.enrollId == null && ticketInfo.isBuyer != 1">领取票券</div>
        <!-- 领取的票id -->
        <div class="c-w100 c-hh64 theme-bg c-flex-row c-flex-center c-fc-white c-br32 c-mt32" @click="toMyActivity" v-else-if="ticketInfo.enrollId">我的票券</div>
        <!-- 无可领取的票 -->
        <div class="c-w100 c-hh64 theme-bg c-flex-row c-flex-center c-fc-white c-br32 c-mt32 c-opacity50" v-else-if="ticketInfo.isRest == 0">票券已被领取</div>
        <div class="theme-fc c-textAlign-c c-mt40" v-if="ticketInfo.enrollId || ticketInfo.isBuyer == 1" @click="goActivityDetail">查看活动</div>
      </section>
    </article>
    <!-- 下拉选择 -->
    <cj-popup v-model="showForm" position="bottom" round title="表单信息" :closeable="true">
      <div class="c-flex-column c-contexty-auto c-maxh760">
        <activity-enroll-form v-if="showForm" :isFromGetTicket="true" :formData="formData" @submit="collectTicket" @cancel="closeModal"></activity-enroll-form>
      </div>
    </cj-popup>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import ActivityEnrollForm from "@/components/templates/activity/activityEnrollForm.vue";
let isClick = false;
export default {
  name: "GetTicket",
  data() {
    return {
      showForm: false,
      activityInfo: "",
      ticketInfo: "",
      enrollStartAt: "",
      enrollEndAt: "",
      formData: [],
      isNeedForm: false, // 是否需要填写表单
    };
  },
  components: {
    ActivityEnrollForm,
  },
  created() {
    utilJs.appShare(this);
  },
  watch: {
  },
  methods: {
    // 点击我的票券
    toMyActivity() {
      this.$routerGo(this, "push", {
        path: `/member/myActivity/myActivity`,
      });
    },
    // 查看活动
    goActivityDetail(id) {
      this.$routerGo(this, "push", {
        path: `/activity/activityDetail?ActivityNo=${this.activityId}`
      });
    },
    //点击领取按钮
    clickCollect() {
      // isCollectForm：1=勾选填多人信息 ；0=不勾选  enableCustomerForm：是否开启自定义表单：1=开启；-1=关闭
      // 开启自定义表单 && 不勾选填多人信息 才需要填表单
      if (this.activityInfo.isCollectForm == 1 || !this.isNeedForm) {
        this.collectTicket();
      } else {
        this.showForm = true;
      }
    },
    // 获取活动信息
    getActicityInfo() {
      let $this = this;
      utilJs.getMethod(`${global.apiurl}activities/getShareActivtiyInfo?activityId=${this.activityId}`,
        function (res) {
          $this.activityInfo = res;
          $this.enrollStartAt = res.enrollStartAt.substr(5, 11);
          $this.enrollEndAt = res.enrollEndAt.substr(5, 11);
          $this.getShareInfo();
          // isCollectForm：1=勾选填多人信息 ；0=不勾选  enableCustomerForm：是否开启自定义表单：1=开启；-1=关闭
          // 开启自定义表单 && 不勾选填多人信息 才需要填表单
          if (res.enableCustomerForm == 1 && res.isCollectForm == 0) {
            $this.getEnrollForm();
          }
        }
      );
    },
    // 获取领取票券信息
    getShareInfo() {
      let $this = this;
      let data = {
        activityId: this.activityId,
        aeIdArr: this.aeIdArr
      };
      utilJs.postMethod(`${global.apiurl}activities/getShareInfo`, data,
        function (res) {
          $this.ticketInfo = res;
        }
      );
    },
    // 获取表单信息
    getEnrollForm() {
      let $this = this;
      utilJs.postMethod(`${global.apiurl}activities/mgenrollfield`,
        { activityId: this.activityId },
        function (res) {
          // 获取报名表单信息

          res.data.forEach(item => { // 判断是否所有选项都是不显示的，都是不显示就不需要填表
             if (item.enabled == 1) {
              $this.isNeedForm = true
            }
            if (item.dataType == 13) {
              item.value = item.value || [];
            }
          });
          $this.formData = [{
            name: '',
            mobile: '',
            fieldVal:[...res.data]
          }]
        }
      );
    },
    //领取票券
    collectTicket(submitData) {
      let $this = this;
      if (isClick == true) {
        return;
      }
      let name = submitData && submitData[0] ? submitData[0].name : '';
      let mobile = submitData && submitData[0] ? submitData[0].mobile : '';
      let fieldVal = submitData && submitData[0] ? submitData[0].fieldVal : '';
      isClick = true;
      let data = {
        activityId: this.activityId,
        aeIdArr: this.aeIdArr,
        name: name,
        mobile: mobile,
        fieldVal: JSON.stringify(fieldVal)
      };
      utilJs.postMethod(
        global.apiurl + "activities/receiveEnroll",
        data,
        function (res) {
          isClick = false;
          $this.getShareInfo();
          $this.showForm = false;
          $this.$showCjToast({
            text: "领取成功",
            type: "success",
          });
        },
        function () {
          isClick = false;
        }
      );
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { }, true);
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    },
  },
  activated() {
    setDocumentTitle("领取票券");
    this.activityId = this.$route.query.activityId || "";
    this.aeIdArr = this.$route.query.aeIdArr || "";
    this.showForm = false;
    this.activityInfo = "";
    this.ticketInfo = "";
    this.enrollStartAt = "";
    this.enrollEndAt = "";
    this.formData = [];
    this.isNeedForm = false;
    this.getActicityInfo();
    this.wechatShare();
  },
  deactivated() {
  }
};
</script>
<style scoped>
.activity-body{
  position: relative;
}
.activity-body::before{
  content: '';
  position: absolute;
  z-index: 1;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #f5f5f5;
  border-radius: 50%;
  bottom: -0.25rem;
  left: -0.25rem;
}
.activity-body::after{
  content: '';
  position: absolute;
  z-index: 1;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #f5f5f5;
  border-radius: 50%;
  bottom: -0.25rem;
  right: -0.25rem;
}
</style>


